import { StyleSheet, 
  ImageBackground, 
  Text, 
  FlatList,
  ToastAndroid,
  BackHandler,
  View, 
  Image,
  Button,
  Modal,
  TextInput,
  ScrollView,
  Dimensions,
  TouchableOpacity,
  PixelRatio,
  Platform
} from 'react-native';
import React, { useState,useEffect } from 'react';
import './global';

const Btn = ({style,font,children,...rest})=>{
  return (
    <TouchableOpacity
      {...rest}
      style={
        [style,
          {justifyContent:'center',alignItems:'center'}
        ]
      }
    >
      <Text style={font}>{children}</Text>
    </TouchableOpacity>
  )
}

const Mycom = Platform.select({
  android:()=><Text>android</Text>,
  ios:()=><Text>ios</Text>
})


export default function App() {
  return (
    <View style={[styles.container]}>
      <Mycom />
      <Image 
        style={{width:100,height: 100}}
        source={require('./assets/icon/user.png')}
      />
      <Btn 
        onPress={()=>console.log(1234)}
        style={{
          width: p2d(150),
          height: 32,
          backgroundColor: 'red',
        }}
        font={{color:'#fff',fontSize: 20}}
      >
        自定
      </Btn>

      <TouchableOpacity>
        <Text>fff</Text>
      </TouchableOpacity>
    </View>
  );
}
const styles = StyleSheet.create({
  container:{
    paddingTop: 30,
    flex: 1,
    ...Platform.select({
      android:{
        backgroundColor: '#ccc'
      },
      ios:{
        backgroundColor: 'red'
      }
    })
  }
});